<script setup>
import { onMounted, ref } from 'vue'
import { getOrderDetailAPI } from '@/apis/order'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/userStore'
import CartButton from '@/components/CartButton/index.vue'
import TimeLine from '@/components/TimeLine/index.vue'
import { ElMessage } from 'element-plus'
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

onMounted(() => getOrderDetail())

const timelineData = ref([
	{
		value: 1,
		label: '提交订单'
	},
	{
		value: 2,
		label: '付款成功'
	},
	{
		value: 3,
		label: '商品发货'
	},
	{
		value: 4,
		label: '待收货'
	},
	{
		value: 5,
		label: '已完成'
	}
])
const orderInfo = ref({
	status: null
})
const getOrderDetail = async () => {
	const res = await getOrderDetailAPI({ orderId: route.params.orderId })
	orderInfo.value = res.data
}
</script>

<template>
	<div class="order-detail">
		<div class="box box-info">
			<TimeLine v-if="orderInfo.status" :timelineData="timelineData" :activeValue="orderInfo.status" />
			<div class="info">
				<div class="item">
					<span class="label">订单编号 : </span>
					<span class="value">{{ route.params.orderId }}</span>
				</div>
				<div class="row">
					<div class="item">
						<span class="label">下单时间 : </span>
						<span class="value">{{ orderInfo.createTime }}</span>
					</div>
					<div class="item">
						<span class="label">付款时间 : </span>
						<span class="value">{{ orderInfo.payTime }}</span>
					</div>
					<div class="item">
						<span class="label">支付方式 : </span>
						<span class="value">在线支付</span>
					</div>
					<div class="item">
						<span class="label">配送方式 : </span>
						<span class="value">快递配送</span>
					</div>
				</div>
				<div class="row">
					<div class="item item1">
						<span class="label">收货人 : </span>
						<span class="value">{{ orderInfo.orderAddr && orderInfo.orderAddr.consignee }} {{ orderInfo.orderAddr && orderInfo.orderAddr.mobile }}</span>
					</div>
					<div class="item">
						<span class="label">收货地址 : </span>
						<span class="value">
							{{ orderInfo.orderAddr && orderInfo.orderAddr.province + orderInfo.orderAddr.city + orderInfo.orderAddr.area + ' ' + orderInfo.orderAddr.addr }}
						</span>
					</div>
				</div>
			</div>
		</div>
		<div class="box box-product">
			<div class="shop">
				<img src="../../assets/images/order-images/shopLogo2.png" alt="" />
				<div class="title">{{ orderInfo.shopName }}</div>
			</div>

			<div class="box-body box-goods">
				<table>
					<tbody>
						<tr v-for="item in orderInfo.orderItems" :key="item.id">
							<td width="30%" class="goods" @click="$router.push(`/detail/${item.spuId}`)">
								<img :src="item.imgUrl" alt="" />
								<span class="name">{{ item.spuName }} - {{ item.skuName }}</span>
							</td>
							<td width="5%">×{{ item.count }}</td>
							<td width="20%">&yen;{{ (item.price / 100).toFixed(2) }}</td>
							<td width="30%">&yen;{{ (item.spuTotalAmount / 100).toFixed(2) }}</td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td>
								合计 ： <span class="num">&yen;{{ (orderInfo.total / 100).toFixed(2) }}</span>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.order-detail {
	background-color: #f4f4f4;
	padding: 0 160px 30px;
	min-height: calc(100vh - 151px);
	.box {
		padding: 35px 100px 20px;

		background-color: #fff;
	}
	.box-info {
		.info {
			.row {
				display: flex;
			}
			.item {
				max-width: 650px;

				margin-top: 20px;
				font-size: 14px;
				line-height: 21px;
				margin-right: 50px;
				.label {
					display: inline-block;
					width: 5em;
					color: #999999;
				}
				.value {
					color: #333333;
				}
			}
			.item1 {
				white-space: nowrap;
			}
		}
	}
	.box-product {
		width: 100%;
		margin-top: 30px;
		.shop {
			display: flex;
			align-items: center;
			img {
				width: 32px;
				height: 32px;
				margin-right: 10px;
			}
			.title {
				font-size: 18px;
				color: #333333;
				line-height: 27px;
			}
		}

		.goods {
			width: 100%;
			display: flex;
			align-items: center;
			cursor: pointer;
			text-align: left;
			img {
				width: 50px;
				height: 50px;
				margin-right: 20px;
			}

			.name {
				width: 200px;
				font-size: 14px;
				color: #333333;
				line-height: 21px;
			}
		}

		table {
			width: 100%;
			border-collapse: collapse;
			border-spacing: 0;

			tr {
				border-bottom: 1px solid #f4f4f4;
				th {
					background: #f5f5f5;
					font-weight: normal;
				}

				td,
				th {
					text-align: center;
					padding: 24px 0;

					&:last-child {
						text-align: right;
					}

					.num {
						padding: 11px 0 21px;
						font-weight: 700;
						font-size: 24px;
						color: $xtxColor;
						line-height: 36px;
					}
				}

				td:nth-child(2) {
					text-align: right !important;
					padding-right: 30px;
				}
				td:nth-child(3) {
					text-align: left !important;
				}
			}

			tr:last-of-type {
				border-bottom: 0;
				td {
					padding: 11px 0 21px 0;
				}
			}
		}
	}
}
</style>